<template>
  <div>
    <v-text-field
      :value="value"
      @input="handleChange"
      :label="label"
      readonly
      @click="colorPickerVisiable = !colorPickerVisiable"
    >
      <template v-slot:append>
        <v-btn
          style="
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 0px;
            background-color: rgba(0, 0, 0, 0.1);
          "
          icon
          :color="value"
          @click="colorPickerVisiable = !colorPickerVisiable"
        >
          <j-icon size="20" :color="value">{{ colorPickerVisiable ? "mdi-close" : "mdi-palette" }}</j-icon></v-btn
        >
      </template>
    </v-text-field>
    <v-color-picker
      v-if="colorPickerVisiable"
      dot-size="25"
      swatches-max-height="200"
      show-swatches
      :value="value"
      mode="hexa"
      @input="handleChange"
    ></v-color-picker>
  </div>
</template>
<script>
export default {
  name: "JcColorPicker",
  props: {
    value: {
      type: String,
      default: "#000000",
    },
    label: {
      type: String,
      default: "字体颜色",
    },
  },
  data() {
    return {
      colorPickerVisiable: false,
    };
  },
  methods: {
    handleChange(value) {
      this.$emit("input", value);
    },
    handleFocus() {
      this.colorPickerVisiable = true;
    },
  },
};
</script>
<style scoped></style>
